<template>
  <div>
    <!-- 右键自定义菜单 -->
    <ul
      v-show="visible"
      :style="{ left: left + 'px', top: top + 'px' }"
      class="contextmenu"
    >
      <li @click="gobasic"
      >
        个人基本资料
      </li>
      <li @click="chakanjianli"
      >
        个人简历
      </li>
      <li @click="gojiashu"
      >
        家庭主要成员
      </li>
      <li>社会关系资料</li>
    </ul>
  <el-select v-model="selectoption" placeholder="请选择" @change='xuanzhong()' class="keshixuanze">
    <el-option
      v-for="item in options"
      :key="item.sectionNo"
      :label="item.sectionName"
      :value="item.sectionName">
    </el-option>
  </el-select>
  


       <el-input v-model="input" placeholder="职工编号/姓名" class="heinp"></el-input>
   <el-button @click="chaxun">查询</el-button>
   <el-button @click="chongzhi">重置</el-button>
      <el-button @click="addnewpeople" >新增人员</el-button>

<!--  添加 -->
     <el-dialog title="新增员工" :visible.sync="dialogFormVisibleadd" id="ind" :modal="false"  >
      <el-form
      ref="addform"
      :model="addform"
      label-width="80px"
      style="font-size: 12px"
    >
      <el-form-item label="个人基本资料" label-width="100px">
      </el-form-item>

   
          <el-form ref="form" :model="addform" label-width="80px" :rules="registerRules" >
  <el-form-item label="姓名">
    <el-input v-model="addform.personName"></el-input>
  </el-form-item>
  <el-form-item label="性别">
    <el-radio-group v-model="addform.personSex" class="mySex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
  </el-form-item>
  <el-form-item label="婚否">
    <el-radio-group v-model="addform.marry" class="mySex">
                <el-radio :label="1">已婚</el-radio>
                <el-radio :label="0">未婚</el-radio>
              </el-radio-group>
  </el-form-item>
  <el-form-item label="行政职务">
    <el-select v-model="addform.postNo" placeholder="请选择">
              <el-option
                v-for="item in zhiwu"
                :key="item.postNo"
                :label="item.postName"
                :value="item.postNo"
              >
              </el-option>
                </el-select>
  </el-form-item>
  <el-form-item label="技术职称">
   <el-select v-model="addform.titleNo" placeholder="请选择">
              <el-option
                v-for="item in zhicheng"
                :key="item.titleNo"
                :label="item.titleName"
                :value="item.titleNo"
              >
              </el-option>
                </el-select>
  </el-form-item>
  <el-form-item label="最高学历">
  <el-select v-model="addform.highSchooling" placeholder="请选择">
              <el-option
                v-for="item in xueli"
                :key="item.highSchooling"
                :label="item.highName"
                :value="item.highSchooling"
              >
              </el-option>
            </el-select>
  </el-form-item>

  <el-form-item label="生日">
 <el-date-picker
                class="timeput"
                v-model="addform.birthDate"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
  </el-form-item>
  <el-form-item label="科室">
  <el-select v-model="addform.sectionNo" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.sectionNo"
                :label="item.sectionName"
                :value="item.sectionNo"
              >
              </el-option>
            </el-select>
  </el-form-item>
    <el-form-item label="学位">
  <el-input v-model="addform.degree"></el-input>
  </el-form-item>
  <el-form-item label="身份证号" prop="capacityNo">
 <el-input v-model="addform.capacityNo"></el-input>
  </el-form-item>
  <el-form-item label="籍贯">
   <el-input v-model="addform.nativePlace"></el-input>
  </el-form-item>
  <el-form-item label="民族">
     <el-input v-model="addform.nation"></el-input>
  </el-form-item>
</el-form>
    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleadd = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisibleadd = false;
            addyuangong()
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-table :data="index" style="width: 100%" @row-contextmenu='dianji'>
      <el-table-column align="center" label="姓名" >
        <template slot-scope="scope">
          <span  @contextmenu.prevent="openMenu($event,scope.row)">{{ scope.row.personName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="性别">
        <template slot-scope="scope">
          <i class="el-icon-user" ></i>
          <span  @contextmenu.prevent="openMenu($event)">{{ scope.row.personSex }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="现任职务">
        <template slot-scope="scope">
          <span  @contextmenu.prevent="openMenu($event)">{{ 
            scope.row.post.postName ==null ?'':scope.row.post.postName
            }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="技术职称" >
        <template slot-scope="scope" @contextmenu.prevent="openMenu($event)">
          <span>{{ scope.row.title.titleName  ==null ?'':scope.row.title.titleName
            }}</span>
        </template>
      </el-table-column>
     <!--  <el-table-column align="center" label="学历" width="180">
        <template slot-scope="scope" @contextmenu.prevent="openMenu($event)">
          <span>{{ scope.row.highSchoolings.highName  ==null ?'': scope.row.highSchoolings.highName 
            }}</span>
        </template>
      </el-table-column> -->
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="selectXq(scope.row)">查看详情</el-button>
          <el-button size="mini" @click="delet(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
     <div class="pagination">
      <el-pagination layout="prev, pager, next" :page-count="totalPage" @current-change="handleCurrentChange"></el-pagination>
    </div>

  </div>
</template>
<script>
import { mapActions } from 'vuex';
import { mapMutations } from 'vuex';
export default {
   computed: {
    index: function () {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    totalPage: function () {
      return Math.ceil(this.tableData.length / this.pageSize);
    },
  },
  created(){
    console.log(this.$store.state.dianji)
    console.log(this.$store.state.list)
    if(this.$store.state.list.length>0){

      this.tableData=   JSON.parse(JSON.stringify(this.$store.state.list))     
    }else{
      this.getallpeople()
    }
  },
  data() {
    return {
      registerRules: {
        capacityNo: [{ required: true, trigger: 'blur' ,message: "输入错误"},{
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "输入错误",
          },]
      },
      input:'',
      zhicheng:[],
      zhiwu:[],
      xueli:[],
      addform:{
        capacityNo:''
      },
      dialogFormVisibleadd:false,
      caozuoid:'',
      dialogVisible: true,
      currentPage:1,
      pageSize:5,
      selectoption:'',
      options:[],
       activeName: 'first',
      maxPage:5,
      visible: false,
      top: 0,
      left: 0,
       indexMethod: '',
      tableData: [],
      pages: 10 * 10,
      search: '',
      isshow: false,
      inputpostNo:'',
    }
  },
  watch: {
    visible(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
  },
  methods: {
     ...mapMutations(['setlist']),
        ...mapActions(['tongyong']),
        ...mapMutations(['setcaozuoid']),
   dianji(row,evevt){
      this.openMenu(evevt,row)
        },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    /* 获取所有科室名称 */
    getkeshi(){
       this.tongyong({
        name: 'SELECT_keshi',
        data: {
         
        },
      }).then(resp => {
        this.options=resp.data.data
        this.selectoption=resp.data.data[0].sectionName
      });
    },
    getallpeople(){
       this.tongyong({
        name: 'SELECT_allpeople',
        data: {
        },
      }).then(resp => {
        this.tableData=resp.data.data
        this.getkeshi()
      });
    },
    /* 上一页，下一页 */
    handleCurrentChange(item){
     console.log(item)
     this.currentPage=item
    },
    /* 打开自定义菜单 */
    openMenu(e,people) {
      console.log(e)
      const menuMinWidth = 105
      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
      const offsetWidth = this.$el.offsetWidth // container width
      const maxLeft = offsetWidth - menuMinWidth // left boundary
      const left = e.clientX - offsetLeft // 15: margin right

      if (left > maxLeft) {
        this.left = maxLeft
      } else {
        this.left = left
      }

      this.top = e.clientY - 60 // fix 位置bug
      this.visible = true
      console.log(people)
      this.caozuoid=people.personNo
    },
    /* 关闭自定义菜单 */
    closeMenu() {
      this.visible = false;
    },
    /* 查看详情 */
    selectXq(item){
      console.log(item)
      this.setcaozuoid(item.personNo)
       this.$router.push({
       path:'xiangxixingxi',
     })

    },
    /* 点击下拉框查询 */
    xuanzhong(){
        console.log(this.selectoption)
        this.selectbumen()
   },
   /* 查询部门人 */
   selectbumen(){
       this.tongyong({
        name: 'SELECT_keshipeople',
        data: {
         "sectionName": this.selectoption
      },
      }).then(resp => {
        if(resp.data.code==200)  {
        console.log(resp.data.data.list);
        this.tableData=resp.data.data.list
        }

      });
   },
   /* 跳转查看员工详细信息 */
   gobasic(){
     this.$router.push({
       path:'xiangxixingxi',
     })
     this.setcaozuoid(this.caozuoid)
   },
   /* 跳转查看员工家属 */
   gojiashu(){
     this.$router.push({
       path:'jiashu',
     })
     this.setcaozuoid(this.caozuoid)
   },
   /* 删除员工 */
   delet(pep){
     console.log(pep)
 this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tongyong({
            name: "del_yuangong",
            data: pep.personNo,
          }).then((data) => {
            console.log(data);
           this.getallpeople()
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
  
  },
   /* 查看员工简历 */
   chakanjianli(){
     this.$router.push({
       path:'jianli',
     })
     this.setcaozuoid(this.caozuoid)
   },
     /* 修改时间格式 */
    getData(value) {
          let date = new Date(value)
          let year = date.getFullYear();
          let month = date.getMonth() + 1;
          let d = date.getDate()
     return `${year}-${month}-${d}`
            },
     /* 获取学历 */
       getxueli(){
     this.tongyong({
       name:'SELECT_allxueli',
  
     }).then((resp)=>{
       this.xueli=resp.data.data
     })
    },
    /* 获取职称表 */
    getzhicheng(){
     this.tongyong({
       name:'SELECT_allzhicheng',
  
     }).then((resp)=>{
       this.zhicheng=resp.data.data
     })
    },
    /* 获取职务 */
    getzhiwu(){
      console.log(123)
     this.tongyong({
       name:'SELECT_allzhiwu',
  
     }).then((resp)=>{
       if(resp.data.code==200){
       this.zhiwu=resp.data.data
       }
     })
    },
    /* 新增员工模态框 */
    addnewpeople(){
      this.dialogFormVisibleadd=true
      this.getxueli()
      this.getzhicheng()
      this.getzhiwu()
    },
   /* 新增员工 */
   addyuangong(){
     console.log(this.addform)
     this.addform.birthDate= this.getData(this.addform.birthDate)
     this.tongyong({
        name: 'add_people',
        data: this.addform,
      }).then(resp => {
        console.log(resp.data)
        if(resp.data.code==200)  {
        console.log(resp.data);
        }
      });

   },
   /* 查询 */
   chaxun(){
     this.tongyong({
        name: 'mohuselect_yuangong',
        data: {
          personName:this.input,
          postNo:this.inputpostNo
        },
      }).then(resp => {
        console.log(resp.data)
       if(resp.data.code==200)  {
        this.tableData=resp.data.data
        } 
      });
   },chongzhi(){
     this.setlist([])
     this.getallpeople()
   }
  }
};
</script>
<style lang="less" scoped>
 .contextmenu {
    margin: 0;
    background: #fff;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    li {
      margin: 0;
      padding: 7px 16px;
      cursor: pointer;
      &:hover {
        background: #eee;
      }
    }
  }
  .keshixuanze{
    width: 100px;
  }
  .header_input{
    width: 100px;
  }

.heinp{
  width: 12%;
  margin: 0 12px;
}
/* .myla{
  width: 80%;
  margin: 0 auto;
} */
.myjuzhong{
  width: 80%;
  margin: 0 auto;
}
.sel{
  margin-bottom: 10px;
}
</style>
